<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>在线画图板</title>

		<script src="js/jquery.min.js"></script>
		<script src="js/colpick.js"></script>
		<script src="js/plugin.js"></script>
		<link rel="stylesheet" href="css/colpick.css" type="text/css" />
		<link href="css/canvas.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<header id="header">在线画图板</header>
		<section id="content">
			<!--工具区域-->
			<ul id="tool">
				<li>
					<h3>图像</h3>
					<ul id="image">
						<li id="saveimg">
							<form action="http://localhost/down.php" id="myform" name="data" method="post">
								<input type="hidden" id="data" value="">
								<button onclick="saveimg()">保存图片</button>
								</input>
							</form>
							</li>
						<li id="clearimg" ><button onclick="clearimg()">清空画板</button></li>
						<li id="tree"><a href="tree.html"><button>趣味小树</button></a></li>
					</ul>
				</li>
				<li>
					<h3>工具</h3>
					<ul id="means">

						<li id="means_brush" onclick="drawBrush(0)">
							<img src="images/pen.cur" alt="铅笔" title="铅笔">
						</li>
						<li id="means_pen" onclick="drawPen(1)">
							<img src="images/paintbrush.cur" alt="笔刷" title="笔刷">
						</li>
						<li id="means_temp1" onclick="drawtemp1(2)"></li>
						<li id="means_eraser" onclick="drawEraser(3)">
							<img src="images/rubber.cur" alt="橡皮擦" title="橡皮擦">
						</li>
						<li id="means_paint" onclick="drawPaint(4)">
							<img src="images/paintcan.cur" alt="油漆桶" title="油漆桶">
						</li>
						<li id="means_straw" onclick="drawStraw(5)">
							<img src="images/pipette.cur" alt="吸管工具" title="吸管工具">
						</li>
						<li id="means_text" onclick="drawText(6)">
							<img src="images/word.png" alt="文字工具" title="文字工具">
						</li>
						<li id="means_magnifier" onclick="drawMagnifier(7)">
							<img src="images/zoom_in.cur" alt="放大" title="放大">
						</li>
						<li id="means_drawSuoxiao" onclick="drawSuoxiao(8)" >
							<img src="images/zoom_out.cur" alt="缩小" title="缩小">
						</li>

					</ul>
				</li>
				<li>
					<h3>形状</h3>
					<ul id="shape">
						<li id="shape_line" onclick="drawLine(9)">
							<img src="images/line.png" alt="直线" title="直线">
						</li>
						<li id="shape_arc" onclick="drawArc(11)">
							<img src="images/circle.png" alt="圆形" title="圆形">
						</li>
						<li id="shape_star" onclick="drawStar(10)">
							<img src="images/star.png" alt="五角星" title="五角星">
						</li>
						<li style="width: 124px" id="shape_hexagon" onclick="drawHexagon(12)">
							<span>多边形边数:</span>
							<select name="Number" id="edges">
								<option value="3">3</option>
								<option value="4">4</option>
								<option value="5">5</option>
								<option value="6">6</option>
								<option value="7">7</option>
								<option value="8">8</option>
							</select>
						</li>
						<li>
						</li>
						<li id="notFill"><input type="radio" name="isFill" value="notFill" checked>线框</li>
						<li id="isFill"><input type="radio" name="isFill" value="isFill">填充</li>

					</ul>
				</li>
				<li>
					<h3>线宽</h3>
					<ul id="size">
						<li id="width_1" onclick="setLineWidth(0)">
							<img src="images/size1.png" alt="线宽1px" title="1px">
						</li>
						<li id="width_3" onclick="setLineWidth(1)">
							<img src="images/size2.png" alt="线宽3px" title="3px">
						</li>
						<li id="width_5" onclick="setLineWidth(2)">
							<img src="images/size3.png" alt="线宽5px" title="5px">
						</li>
						<li id="width_8" onclick="setLineWidth(3)" >
							<img src="images/size4.png" alt="线宽8px" title="8px">
						</li>
					</ul>
				</li>
				<li>
					<h3>颜色</h3>
					<ul id="color">
						<li id="red" onclick="setColor(this,0)"></li>
						<li id="green" onclick="setColor(this,1)"></li>
						<li id="blue" onclick="setColor(this,2)"></li>
						<li id="yellow" onclick="setColor(this,3)"></li>
						<li id="white" onclick="setColor(this,4)"></li>
						<li id="black" onclick="setColor(this,5)"></li>
						<li id="pink" onclick="setColor(this,6)"></li>
						<li id="purple" onclick="setColor(this,7)"></li>
						<li id="cyan" onclick="setColor(this,8)"></li>
						<li id="orange" onclick="setColor(this,9)"></li>
					</ul>
					<!--<input id="colorCheck" type="color" value="#2D9900"/>-->
					<input type="text" id="picker"></input>
				</li>
			</ul>
			<!--绘图区域-->
			<canvas id="canvas" width="890" height="400">
				您的浏览器不支持canvas标签，请升级浏览器
			</canvas>
			<!--请在canvas标签之后连入JS文件--->
			<script src="js/canvas.js"></script>
		</section>
		<footer id="footer">
			<small>版权归福大14数媒yuanyuan所有@ fzu</small>
		</footer>
	</body>
</html>